<template>
  <Modal v-model="showModal" title="音频播放" :footer-hide="true" class="audio-modal"
    :transfer='false'>
    <audio controls ref="audio" class="dt-audio">
      <source :src="srcAudio" type="audio/mpeg">
      <source :src="srcAudio" type="audio/ogg">
      <embed height="50" width="100" :src="srcAudio">
    </audio>
    <div class="footer">
      <Button @click='downLoad' type="success">下载</Button>
      <Button @click='hide' style="marginLeft:10px">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import toolApi from "@/biz/base/tool";

  export default {
    props: {
      // srcAudio: String
    },
    data() {
      return {
        showModal: false,
        srcAudio: ''
      }
    },
    methods: {
      downLoad() {
        toolApi.downloadFile(this.srcAudio, '音频', '',
          'audio/mpeg;audio/ogg;audio/aac;audio/wav;audio/webm', 'noHomologous');
      },
      show(srcAudio) {
        if (srcAudio) {
          this.srcAudio = srcAudio
          this.showModal = true
          this.$refs.audio.load()
          this.$refs.audio.play()
        } else {
          this.$Message.warning('暂无录音')
        }

      },

      hide() {
        this.$refs.audio.pause()
        this.showModal = false
      },
    },
  }
</script>

<style scoped lang="scss">
  .audio-modal {
    .dt-audio {
      width: 100%;
    }

    .footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
</style>